<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';

// 数据筛选相关
const clientNameKeyword = ref('');
const selectedDateRange = ref([]);
const productType = ref('');

// 产品类型选项
const productOptions = [
  { label: '全部', value: '' },
  { label: '自营垫资赎楼', value: 'self' },
  { label: '助贷', value: 'assist' }
];

// 表格数据
const tableData = ref([]);
const loading = ref(false);
const totalAmount = ref('4230787.6');

// 分页
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(496);

// 初始化表格数据（示例数据）
const mockTableData = [
  {
    id: '7930816199912616924',
    status: '待分配',
    productType: '自营垫资赎楼',
    clientName: '刘芹',
    clientPhone: '13996486137',
    loanAmount: 60,
    feeSettlement: 0,
    createTime: '2024-08-02 14:23:19'
  },
  {
    id: '4266514901606750143',
    status: '已完成',
    productType: '自营垫资赎楼',
    clientName: '张老师',
    clientPhone: '15823287816',
    loanAmount: 1000000,
    feeSettlement: 114411,
    createTime: '2024-07-23 10:13:45'
  },
  {
    id: '5675487045997821250',
    status: '待分配',
    productType: '自营垫资赎楼',
    clientName: '涂空玲',
    clientPhone: '18696660889',
    loanAmount: 300000,
    feeSettlement: 0,
    createTime: '2024-07-03 14:31:03'
  },
  {
    id: '1505346478824848551',
    status: '待风控审核',
    productType: '自营垫资赎楼',
    clientName: '蒋超',
    clientPhone: '18680909098',
    loanAmount: 1000000,
    feeSettlement: 0,
    createTime: '2024-05-08 15:32:17'
  },
  {
    id: '7883728802809927835',
    status: '待分配',
    productType: '自营垫资赎楼',
    clientName: '周鹰',
    clientPhone: '15808006623',
    loanAmount: 450000,
    feeSettlement: 0,
    createTime: '2024-05-07 19:09:03'
  },
  {
    id: '8094728370133734184',
    status: '待财务审核',
    productType: '自营垫资赎楼',
    clientName: '胡军',
    clientPhone: '13883691869',
    loanAmount: 600000,
    feeSettlement: 0,
    createTime: '2024-04-15 09:58:48'
  },
  {
    id: '2530555437191377964',
    status: '待面签',
    productType: '自营垫资赎楼',
    clientName: '周修强',
    clientPhone: '15808006683',
    loanAmount: 2490000,
    feeSettlement: 0,
    createTime: '2024-04-11 14:53:49'
  },
  {
    id: '8670642283034193119',
    status: '已取消',
    productType: '自营垫资赎楼',
    clientName: '黄宗林',
    clientPhone: '15199309999',
    loanAmount: 1090000,
    feeSettlement: 0,
    createTime: '2024-01-31 18:17:42'
  },
  {
    id: '7739198939938670889',
    status: '待财务审核',
    productType: '自营垫资赎楼',
    clientName: '郑世超',
    clientPhone: '18983267772',
    loanAmount: 1000000,
    feeSettlement: 0,
    createTime: '2024-01-26 17:02:19'
  },
  {
    id: '9722615076381860552',
    status: '待财务审核',
    productType: '自营垫资赎楼',
    clientName: '詹俊',
    clientPhone: '13650532898',
    loanAmount: 900000,
    feeSettlement: 0,
    createTime: '2024-01-26 16:25:03'
  }
];

// 初始化数据
onMounted(() => {
  fetchData();
});

// 获取数据
const fetchData = () => {
  loading.value = true;
  // 模拟API请求
  setTimeout(() => {
    tableData.value = mockTableData;
    loading.value = false;
  }, 500);
};

// 处理查询
const handleSearch = () => {
  currentPage.value = 1;
  fetchData();
  ElMessage.success('查询成功');
};

// 重置查询条件
const resetSearch = () => {
  clientNameKeyword.value = '';
  selectedDateRange.value = [];
  productType.value = '';
  currentPage.value = 1;
  fetchData();
};

// 处理分页变化
const handlePageChange = (page) => {
  currentPage.value = page;
  fetchData();
};

// 处理每页数量变化
const handleSizeChange = (size) => {
  pageSize.value = size;
  currentPage.value = 1;
  fetchData();
};

// 处理行点击
const handleRowClick = (row) => {
  console.log('查看详情:', row);
  // 实际项目中可以跳转到详情页面
};

// 格式化金额
const formatAmount = (amount) => {
  return amount ? amount.toLocaleString() : '0';
};
</script>

<template>
  <div class="fee-settlement-container">
    <!-- 筛选条件 -->
    <el-card shadow="never" class="filter-card">
      <div class="filter-form">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-select v-model="productType" placeholder="产品类型" clearable style="width: 100%">
              <el-option v-for="item in productOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-input v-model="clientNameKeyword" placeholder="请输入客户姓名" clearable @keyup.enter="handleSearch">
              <template #prefix>
                <el-icon><i-ep-search /></el-icon>
              </template>
            </el-input>
          </el-col>
          <el-col :span="8">
            <el-date-picker v-model="selectedDateRange" type="daterange" range-separator="至" start-placeholder="提交开始时间"
              end-placeholder="提交结束时间" style="width: 100%" />
          </el-col>
          <el-col :span="4">
            <div class="btn-group">
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button @click="resetSearch">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <!-- 总结算金额 -->
    <div class="total-amount mt-20">
      总结算金额: <span class="amount">{{ totalAmount }}</span>
    </div>

    <!-- 表格 -->
    <el-card shadow="never" class="table-card mt-20">
      <el-table :data="tableData" style="width: 100%" border v-loading="loading" @row-click="handleRowClick"
        :header-cell-style="{ background: '#f5f7fa' }">
        <el-table-column prop="id" label="订单编号" width="220" />
        <el-table-column prop="status" label="订单状态" width="120" />
        <el-table-column prop="productType" label="产品类型" width="120" />
        <el-table-column prop="clientName" label="客户姓名" width="120" />
        <el-table-column prop="clientPhone" label="客户电话" width="140" />
        <el-table-column label="贷款金额" width="120" align="right">
          <template #default="scope">
            {{ formatAmount(scope.row.loanAmount) }}
          </template>
        </el-table-column>
        <el-table-column label="费用结算" width="120" align="right">
          <template #default="scope">
            {{ formatAmount(scope.row.feeSettlement) }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="提交时间" min-width="160" />
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
          background layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="handlePageChange" />
      </div>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.fee-settlement-container {
  .filter-card {
    .filter-form {
      .btn-group {
        display: flex;
        justify-content: flex-end;
      }
    }
  }

  .mt-20 {
    margin-top: 20px;
  }

  .total-amount {
    font-size: 16px;
    font-weight: bold;

    .amount {
      font-size: 20px;
      color: #E6A23C;
    }
  }

  .table-card {
    .pagination-container {
      margin-top: 20px;
      display: flex;
      justify-content: center;
    }
  }
}
</style>